<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>账号注销验证</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        body {
            position: absolute;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
        }

        .wrap {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .wrap_inner {
            width: 295px;
            height: 265px;
            background: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
        }

        .content_top {
            width: 100%;
            font-size: 17px;
            color: #333333;
            text-align: center;
            padding: 17.5px 0;
            padding-bottom: 7px;
            /*background: #fff;*/
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            /*position: absolute;*/
        }

        .content_center {
            width: 100%;
            flex: 1;
            padding: 0px 27.5px;
            margin-top: 13px;
            overflow: auto;
        }

        .content_center .content {
            width: 100%;
            height: 150px;
            border-radius: 5px;
            padding: 14.5px 10px 0 10px;
            box-sizing: border-box;
        }

        .content_center .content textarea {
            display: block;
            height: 120px;
        }

        .content_bottom {
            width: 100%;
            overflow: hidden;
            margin-bottom: 20px;
            padding: 0 27.5px;
        }

        .content_bottom_inner {
            width: 100%;
            height: 44px;
            line-height: 44px;
            text-align: center;
            background: linear-gradient(-77deg, #6741F9, #9D45F5);
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #fff;
            border-radius: 22px;
            border: none;
        }

        .content_top_title {
            height: 16px;
            line-height: 16px;
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #000000
        }

        .close_page {
            width: 13px;
            height: 13px;
            background: url(../../image/close.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: 15px;
            top: 19px;
        }

        .box_input {
            width: 100%;
            overflow: hidden;
        }

        .mobile_input {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding-bottom: 10px;
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(0, #EEEEEE, #EEEEEE 50%, transparent 50%);
            background-image: -webkit-linear-gradient(90deg, #EEEEEE, #EEEEEE 50%, transparent 50%);
            overflow: hidden;
        }

        .mobile_input .acount_icon {
            width: 20px;
            height: 20px;
            margin-top: 5px;
            /*margin-left: 15px;*/
        }

        .mobile_input .acount_icon img {
            width: 100%;
            height: 100%;
        }

        .mobile_input .mobile_input_l {
            width: 100%;
            height: 30px;
            margin-left: 8px;
            flex: 1;
        }

        .mobile_input .mobile_input_l input {
            width: 100%;
            height: 100%;
            height: 20px;
            line-height: 20px;
            margin-top: 5px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #222222;
        }

        .mobile_input .mobile_input_r {
            /*width: auto;
            max-width: 60px;
            height: 100%;
            line-height: 20px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;*/
        }

        .mobile_input_r button {
            width: auto;
            height: 29px;
            background: #0099FF;
            border-radius: 3px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 29px;
            border: none;
            text-align: center;
            margin-top: 0.5px;
        }

        .acount_remove_icon {
            width: 18px;
            height: 18px;
            margin-top: 6px;
        }

        .acount_remove_icon img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .mobile_input_r button {
            width: auto;
            height: 29px;
            background: #fff;
            border-radius: 3px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #5D46DB;
            line-height: 29px;
            border: none;
            text-align: center;
            margin-top: 0.5px;
        }

        [v-cloak] {
            display: none!important;
        }
    </style>
</head>

<body>
    <div id="app" class="wrap" v-cloak>
        <div class="wrap_inner">
            <div class="content_top">
                <div class="content_top_title">注销验证</div>
                <div class="close_page" @click='closeFrm()'></div>
            </div>
            <div class="content_center">
                <div class="content">
                    <div class="box_input">
                        <div class="mobile_input">
                            <div class="acount_icon">
                                <img src="../../image/acountIcon.png" alt="">
                            </div>
                            <div class="mobile_input_l">
                                <input type="text" placeholder="请输入手机号" v-model='mobile' disabled="true">
                            </div>
                        </div>
                        <div class="mobile_input" style="margin-top:25px;">
                            <div class="acount_icon">
                                <img src="../../image/codeImg.png" alt="">
                            </div>
                            <div class="mobile_input_l">
                                <input type="number" placeholder="请输入验证码" v-model='phoneCode'>
                            </div>
                            <div class="mobile_input_r">
                                <button type="button" name="button" @click='getCode()' :disabled="disabled">{{codedefault}}</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="content_bottom">
                <button class="content_bottom_inner" @click='comfirm()'>确定</button>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript" src="../../script/md5.js"></script>
<script type="text/javascript">
    apiready = function() {
        cl.apiready();
        console.log(cl.userInfo.account);
        vm.mobile = cl.userInfo.account;

    }
    var vm = new Vue({
        el: '#app',
        data: {
            mobile: '',
            phoneCode: '',
            codedefault: '获取验证码',
            timer_num: 60, //倒计时
            disabled: false,
        },
        methods: {
            closeFrm: function() {
                cl.closeFrame({
                    name: 'cancel_verify_frame'
                });
                api.removePrefs({
                    key: 'isOpenlayer'
                });
            },
            getCode: function() {
                var timestamp = new Date().getTime();
                var Token = MD5(cl.sina + timestamp);
                api.ajax({
                    url: cl.apiServer + 'member/getAuthCode',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token: ''
                    },
                    data: {
                        body: {
                            telephone: vm.mobile,
                            scene: 'logout',
                            csessionid: timestamp,
                            token: Token,
                            version: cl.deviceInfo().appVersion,
                            mobileInfo: cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    console.log(JSON.stringify(ret));
                    if (ret) {
                        if (ret.code == 0) {
                            cl.toast({
                                msg: "验证码发送成功"
                            });
                            timeClock = setInterval(function() {
                                vm.disabled = true;
                                vm.timer_num--;
                                if (vm.timer_num >= 10) {
                                    vm.codedefault = vm.timer_num + '秒后可重新获取';
                                }
                                if (vm.timer_num < 10 && vm.timer_num > 0) {
                                    vm.codedefault = '0' + vm.timer_num + '秒后可重新获取';
                                }
                                if (vm.timer_num == 0) {
                                    clearInterval(timeClock);
                                    vm.timer_num = 60;
                                    vm.codedefault = '重新获取';
                                    vm.disabled = false;
                                }
                            }, 1000);
                        } else {
                            cl.toast({
                                msg: ret.message
                            })
                        }
                    }
                })

            },
            comfirm: function() {
                if (!vm.phoneCode) {
                    cl.toast({
                        msg: '请输入验证码'
                    })
                    return;
                }

                api.ajax({
                    url: cl.apiServer + 'member/cancellation',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token: cl.userToken
                    },
                    data: {
                        body: {
                            account: vm.mobile,
                            id: cl.mid,
                            validateCode: vm.phoneCode,
                            version: cl.deviceInfo().appVersion,
                            mobileInfo: cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    // alert(JSON.stringify(ret));
                    if (ret.code == -1) {
                        $api.setStorage('userToken', null);
                        cl.openWin({
                            name: '../login/login'
                        })
                    } else if (ret.code == 0) {
                        api.removePrefs({
                            key: 'isOpenlayer'
                        });
                        cl.toast({
                            msg: '注销成功'
                        });
                    } else if (ret.code > 0) {
                        cl.toast({
                            msg: ret.msg
                        });
                    }
                });
            }
        }
    });
</script>
